// 测试页面1-组件1
import { Form, Button, Input, Tabs, Switch, Radio, Icon, Toast, Uploader } from '@nutui/nutui-react'
import { useEffect, useState } from 'react'
import css from './index.module.less'
// import * as Event from './event';

export default function AddProduct() {
  // const [form] = Form.useForm();
  const textToast = (msg: string) => {
    Toast.text(msg)
  }
  const [tabKey, setTabKey] = useState('0')
  const [form, setForm] = useState({
    name: '',
    categorys: [
      { name: '默认', key: 'default', isDefalSelect: '0', hasPrice: false },
      { name: '默认1', key: 'default1', isDefalSelect: '0', hasPrice: false },
      { name: '默认2', key: 'default2', isDefalSelect: '0', hasPrice: false },
      { name: '默认3', key: 'default3', isDefalSelect: '0', hasPrice: false },
      { name: '默认4', key: 'default4', isDefalSelect: '0', hasPrice: false },
      { name: '默认5', key: 'default5', isDefalSelect: '0', hasPrice: false },
      { name: '默认6', key: 'default6', isDefalSelect: '0', hasPrice: false },
    ],
  })
  // const [style, setStyle] = useState('style1');

  // 初始化
  useEffect(() => {
    // Event.onLoad.forEach(async (handle) => {
    //   await handle();
    // });
  }, [])

  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', margin: '16px' }}>
        <span className={css['label-width']}>商品名称 :</span>
        <Input
          defaultValue={form.name}
          placeholder="请输入"
          onBlur={(name) => {
            if (name === form.name) return

            setForm((val) => {
              val.name = name
              return { ...val }
            })
          }}
        />
      </div>
      <div style={{ textAlign: 'right', margin: '0 16px' }}>
        <Button plain size="small" type="danger">
          分类 +
        </Button>
        <Button
          plain
          size="small"
          type="danger"
          style={{ marginLeft: '16px' }}
          onClick={() => {
            console.log('tabKey', tabKey)
          }}>
          分类 -
        </Button>
      </div>
      <Tabs
        leftAlign
        titleScroll
        value={tabKey}
        titleGutter="10"
        background="#fff"
        tabStyle={{ borderBottom: '1px solid #f5f6f7' }}
        onChange={({ paneKey }) => {
          setTabKey(paneKey)
        }}>
        {form.categorys.map((item, idx) => (
          <Tabs.TabPane key={item.key} title={item.name || '默认'}>
            <Form>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item label="标签名称 :">
                  <Input
                    placeholder="填写以修改 tab 名称"
                    onBlur={(name) => {
                      setForm((val) => {
                        val.categorys[idx].name = name
                        return { ...val }
                      })
                    }}
                  />
                </Form.Item>
                <Icon name="ask" onClick={() => textToast('只用于修改标签名称')} />
              </div>
              <Form.Item label="默认选中 :" name="isDefalSelect" initialValue={item.isDefalSelect}>
                <Radio.RadioGroup direction="horizontal">
                  <Radio value="1">是</Radio>
                  <Radio value="0">否</Radio>
                </Radio.RadioGroup>
              </Form.Item>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Form.Item label="计量单位 :" name="unit">
                  <Input placeholder="请输入" />
                </Form.Item>
                <Icon name="ask" onClick={() => textToast('常用计量单位有：件、箱、l、ml...')} />
              </div>
              <Form.Item label="限购数量 :" name="limitNum">
                <Input placeholder="请输入" type="number" />
              </Form.Item>
              <Form.Item label="是否定价 :" name="hasPrice">
                <Switch
                  checked={item.hasPrice}
                  onChange={(value) => {
                    setForm((val) => {
                      val.categorys[idx].hasPrice = value
                      return { ...val }
                    })
                  }}
                />
              </Form.Item>
              {item.hasPrice ? (
                <>
                  <Form.Item label="市场价 :" name="marketPrice">
                    <Input placeholder="请输入" type="number" />
                  </Form.Item>
                  <Form.Item label="到手价 :" name="price">
                    <Input placeholder="请输入" type="number" />
                  </Form.Item>
                </>
              ) : (
                ''
              )}
              <Form.Item label="商品大图 :" name="bigImgs" className="align-top">
                <Uploader
                  url="https://my-json-server.typicode.com/linrufeng/demo/posts"
                  // onStart={onStart}
                  style={{ marginTop: '10px' }}
                />
              </Form.Item>
              <Form.Item label="商品小图 :" name="imgs" className="align-top">
                <Uploader
                  url="https://my-json-server.typicode.com/linrufeng/demo/posts"
                  // onStart={onStart}
                  style={{ marginTop: '10px' }}
                />
              </Form.Item>
            </Form>
          </Tabs.TabPane>
        ))}
      </Tabs>
      <div style={{ padding: '0 16px', paddingBottom: '30px' }}>
        <Button size="large" color="linear-gradient(to right, #FF5500, #FF0044)" type="danger">
          提交
        </Button>
      </div>
    </>
  )
}
